<template>
  <div>
    <div class="limiter">
      <div class="container-table100">
        <div class="wrap-table100">
          <div>
            <div class="orderHeader">
              <el-form :inline="true" class="demo-form-inline flexAlginCenter">
                <el-form-item class="dropdown">
                  <el-dropdown style="width: 100px">
                    <span class="el-dropdown-link">
                      {{ orderTypeCheck }}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="-1">全部</el-dropdown-item>
                      <el-dropdown-item command="0">一码一用</el-dropdown-item>
                      <el-dropdown-item command="1">一码多用</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="请输入应用名称" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </el-form-item>
              </el-form>
              <div class="numbox">
                <div class="box1">
                  <div class="text2">102</div>
                  <div class="text3">上传限制<img :src="pageUrl" alt="" /></div>
                </div>
                <div class="box1">
                  <div class="text2">102</div>
                  <div class="text3">上传限制<img :src="pageUrl" alt="" /></div>
                </div>
                <div class="box1">
                  <div class="text2">102</div>
                  <div class="text3">上传限制<img :src="pageUrl" alt="" /></div>
                </div>
              </div>
              <div>
                <el-button type="button" class="upnew">生成授权码
                </el-button>
                <el-button type="button" class="preview">导出</el-button>
              </div>
            </div>
          </div>

          <div class="table100">
            <table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
              <thead>
                <tr class="table100-head">
                  <th class="column1">授权码</th>
                  <th class="column2">设备号</th>
                  <th class="column3">应用名称</th>
                  <th class="column4">状态</th>
                  <th class="column5">类型</th>
                  <th class="column6">生成时间</th>
                  <th class="column7">使用时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in tableData">
                  <td class="column1">
                    <div>{{ item.status }}</div>
                  </td>
                  <td class="column2">
                    {{ item.status }}
                  </td>
                  <td class="column3">
                    <div>{{ item.status }}</div>
                  </td>
                  <td class="column4">
                    <div>{{ item.status }}</div>
                  </td>
                  <td class="column5">
                    <div>{{ item.status }}</div>
                  </td>
                  <td class="column6">
                    <div>{{ item.created }}</div>
                  </td>
                  <td class="column7">
                    <div>{{ item.updated }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import filters from "../../utils/filters";
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        nameKey: "", //需要搜索的key
        upInfo: {}, //已上传信息

        screenWidth: document.body.clientWidth, //获取屏幕宽度的值
        minWidth: 576,
        widthArr: [80, 100, 120],
        orderTypeCheck: "全部",
        pageUrl: "../../../static/上传限制44.png",
        appUrl: "../../../static/App图标.png",
        tableData: [],

      };
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      window.addEventListener("resize", this.handleResize);
      this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      //获取屏幕宽度
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = window.screenWidth;
        })();
      };
    },

    //方法集合
    methods: {
      //授权码列表
      getList() {
        this.loading = true;
        this.$post(this.API.Supersignature_managecode).then((res) => {
          this.loading = false;
          let data = res.data;
          this.tableData = data.list;
        });
      },
      //存条
      format(percentage) {
        let sum = this.tableData.reduce((a, b) => {
          return a + b.size;
        }, 0);
        this.sums = sum / 5;
        if (percentage == 100) {
          return percentage == 100 ? "满" : `${percentage}M`;
        }
      },
      handleClick(row) {
        console.log(row);
      },
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
      },
      //删除item
      deleteItem(itemId) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            var params = new URLSearchParams();
            params.append("appid", itemId);
            // params.append('pageNum', 'forgot');
            this.$post(this.API.Supersignature_delete, params).then((res) => {
              if (res) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });

                // console.log(res);
                location.reload();
              }
            });
          })
          .catch(() => {

          });
      },
      // 复制成功
      onCopy(e) {
        // console.log(e);
        this.$message({
          type: "success",
          message: "复制成功!",
        });
      },
      // 复制失败
      onError(e) {
        alert("失败");
      },
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      screenWidth(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = val;
          this.timer = true;
          let that = this;
          setTimeout(function () {
            // 打印screenWidth变化的值
            that.timer = false;
          }, 400);
        }
      },
    },
  };

</script>
<style scoped>
  .app_name {
    display: flex;
    margin-left: 10px;
  }

  .name-text {
    margin-left: 10px;
  }

  .copy_link {
    display: flex;
    align-items: center;
  }

  body,
  html {
    height: 100%;
    font-family: sans-serif;
  }

  input {
    display: block;
    outline: none;
    border: none !important;
  }

  textarea {
    display: block;
    outline: none;
  }

  textarea:focus,
  input:focus {
    border-color: transparent !important;
  }

  button {
    outline: none !important;
    border: none;
    background: transparent;
  }

  button:hover {
    cursor: pointer;
  }

  iframe {
    border: none !important;
  }

  .content {
    margin: 30px 0px 30px 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }

  .limiter {
    width: 100%;
    margin: 0 auto;
  }

  .container-table100 {
    width: 100%;
    /* min-height: 100vh; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .container-table101 {
    width: 100%;
    min-height: 100vh;
    border-radius: 4px 0px 0px 4px;
  }

  .wrap-table100 {
    width: 1170px;
  }

  table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  table * {
    position: relative;

  }

  table td,
  table th {
    padding-left: 8px;
  }

  table thead tr {
    height: 60px;
    border-bottom: 1px solid #E6E6E6;
  }

  table tbody tr {
    height: 100px;


  }

  table td,
  table th {
    text-align: center;
  }

  table td.l,
  table th.l {
    text-align: center;
  }

  table td.c,
  table th.c {
    text-align: center;
  }

  table td.r,
  table th.r {
    text-align: center;
  }

  .table100-head th {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 14px;
    font-weight: unset;
  }



  tbody tr {
    border-bottom: 1px solid #E6E6E6;
    /* border-left: 1px solid #E6E6E6; */
  }

  tbody tr {
    font-size: 15px;
    color: #808080;
    line-height: 1.2;
    font-weight: unset;
  }

  tbody tr:hover {
    color: #555555;
    background-color: #f5f5f5;
    cursor: pointer;
  }

  .column1 {
    width: 150px;
  }

  .column2 {
    width: 150px;
  }

  .column3 {
    width: 160px;
  }

  .column4 {
    width: 90px;
  }

  .column5 {
    width: 90px;
  }

  .column6 {
    width: 160px;
  }

  .orderHeader {
    display: flex;
    justify-content: space-between;
    height: 80px;
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    /* border-left: 1px solid #E6E6E6; */
  }

  .flexJustifyStart {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .block>>>.el-date-editor .el-range__icon {
    margin-left: -5px !important;
    line-height: 18px !important;
  }

  .orderHeader>>>.el-form-item__content {
    line-height: 40px !important;
  }

  .flexAlginCenter {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .orderBody {
    height: 550px;
  }

  div>>>.el-card {
    border: none;
  }

  div>>>.el-progress-bar {
    width: 260px;
    margin-top: 8px;
    margin-left: 20px;
  }

  /* 按钮 */

  /* 按钮 */
  div>>>.preview {
    background-color: #ff7226;
    color: #fff;
    
    border: 2px solid #ff7226;
  }

  .preview:hover {
    border: 2px solid #ff7226;
    background-color: #fff;
    color: #ff7226;
  }

  .upnew:hover {
    border: 2px solid #5E93FF;
    background-color: #fff;
    color: #5E93FF;
  }

  .upnew {
    border: 2px solid #5E93FF;
    background-color: #5E93FF;
    color: #fff;
     
  }

  div>>>.el-dropdown {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px;
    text-align: center;
  }

  div>>>.el-input-group__append {
    background-color: transparent;
    color: #000;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    padding: 0 20px;
    white-space: nowrap;
    font-size: 16px;
  }

  div>>>.el-card__body {
    padding: 0px;
    text-align: center;
    /* overflow: auto; */
  }

  div>>>.el-card.is-always-shadow {
    box-shadow: none;
  }

  div>>>.cell {
    text-align: center;
  }

  div>>>.el-button--text {
    color: #ff7226;
  }

  div>>>.el-table__body-wrapper {
    overflow-x: auto;
  }

  div>>>.el-input-group {
    width: 220px;
  }

  .wire {
    color: #ff7226;
  }

  /* 云币余额 限制 */
  .right_box {
    display: flex;
  }

  .upload_limit {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
  }

  .allSize_Box {
    display: flex;
    flex-direction: column;
  }

  .allSize_Box_data {
    display: flex;
  }

  .allSize_Box_data_c {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .allSize_Box_data_d {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
  }

  .intel {
    position: absolute;
    top: 55px;
    left: 666px;
  }

  .circle1 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #ff7226;
  }

  div>>>.el-progress-bar__inner {
    background-color: #ff7226;
  }

  div>>>.el-progress-bar__outer {
    background-color: #ffdbc7;
  }

  .cell span {
    width: 1px;
    /*根据自己项目进行定义宽度*/
    overflow: hidden;
    /*设置超出的部分进行影藏*/
    text-overflow: ellipsis;
    /*设置超出部分使用省略号*/
    white-space: nowrap;
    /*设置为单行*/
  }

  .box1 {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* border-right: 1px solid #E0E0E0; */
  }

  .box1:first-child {
    border-right: 1px solid #e0e0e0;
  }

  .box2 {
    margin: 0px 20px;
  }

  .wire {
    margin-left: 10px;
    color: #ff7226;
  }

  /* 云币余额 限制 */
  .numbox {
    display: flex;
    align-items: flex-end;
  }

  .text2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0px 15px;
  }

  .text3 {
    font-size: 12px;
    color: #b7afaf;
    margin-top: 5px;
    margin-left: 10px;
  }

  .text3 img {
    margin-left: 3px;
    margin-top: -3px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 180px;
  }

  .intel {
    position: absolute;
    top: 55px;
    left: 670px;
  }

  .por {
    position: absolute;
    top: 45px;
    left: 505px;
    color: #b7afaf;
    font-size: 12px;
  }

  div>>>.el-progress-bar__inner {
    background-color: #ff7226;
  }

  div>>>.el-progress-bar__outer {
    background-color: #ffdbc7;
  }

  div>>>.el-input-group {
    width: 220px;
  }

  .cell span {
    width: 1px;
    /*根据自己项目进行定义宽度*/
    overflow: hidden;
    /*设置超出的部分进行影藏*/
    text-overflow: ellipsis;
    /*设置超出部分使用省略号*/
    white-space: nowrap;
    /*设置为单行*/
  }

  .box1 {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #e0e0e0;
  }

  .box1:first-child {
    border-left: 1px solid #e0e0e0;
  }

  .box2 {
    margin: 0px 20px;
  }


  /* 媒体查询 */
  @media (max-width: 1199px) {
    .info {
      display: none;
    }

    .container-table101 {
      min-height: 0vh;
    }
  }

  @media screen and (max-width: 992px) {

    .container-table101 {
      min-height: 0vh;
    }

    table {
      display: block;
    }

    table>*,
    table tr,
    table td,
    table th {
      display: block;
    }

    table thead {
      display: none;
    }

    table tbody tr {
      height: auto;
      padding: 37px 0;
    }

    table tbody tr td {
      padding-left: 36% !important;
      margin-bottom: 24px;
    }

    table tbody tr td:last-child {
      margin-bottom: 0;
    }

    table tbody tr td:before {
      font-size: 14px;
      color: #999999;
      line-height: 1.2;
      font-weight: unset;
      position: absolute;
      width: 40%;
      left: 30px;
      top: 0;
    }

    table tbody tr td:nth-child(1):before {
      content: "授权码";
    }

    table tbody tr td:nth-child(2):before {
      content: "设备号";
    }

    table tbody tr td:nth-child(3):before {
      content: "应用名称";
    }

    table tbody tr td:nth-child(4):before {
      content: "状态";
    }

    table tbody tr td:nth-child(5):before {
      content: "类型";
    }

    table tbody tr td:nth-child(6):before {
      content: "生成时间";
    }

    table tbody tr td:nth-child(7):before {
      content: "使用时间";
      display: flex;

      align-items: center;
    }

    .column1,
    .column2,
    .column3,
    .column4,
    .column5,
    .column6,
    .column7 {
      text-align: left;
    }

    .column4,
    .column5,
    .column6,
    .column1,
    .column2,
    .column3 {
      width: 100%;
    }

    tbody tr {
      font-size: 14px;
    }

    .container-table101 {
      min-height: 0vh;
    }

    div>>>.copy_button {
      margin-top: -10px;
      margin-left: 10px;
    }

    div>>>.link_button {
      margin-top: -10px;
      margin-left: -20px;
    }

    .app_name {
      margin-left: 0px;

    }
  }

  @media (max-width: 992px) {
    .numbox {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .dropdown {
      display: none;
    }

  }

  @media (max-width: 576px) {
    .container-table101 {
      min-height: 0vh;
    }

    .el-button {
      padding: 12px 10px;
    }
  }

  @media (max-width: 414px) {
    .flexAlginCenter {
      display: none;
    }

  }

  div>>>.link_button:hover {
    background-color: transparent;
  }

</style>
